很少有開發(fā)人員將他們的網(wǎng)絡(luò)建設(shè)工作集中在客戶體驗(yàn)或整體組織營(yíng)銷策略上。為了在搜索結(jié)果中顯示您的網(wǎng)站，您需要在開發(fā)過程中通過一些最佳實(shí)踐對(duì)網(wǎng)站進(jìn)行一些更改，以獲得最佳頁(yè)面加載時(shí)間。

當(dāng)談到像谷歌這樣的客戶端渲染解決方案時(shí)，網(wǎng)站在搜索結(jié)果中的排名是根據(jù)算法中的指標(biāo)進(jìn)行的，其中網(wǎng)站爬蟲會(huì)識(shí)別出針對(duì)特定搜索展示的最佳內(nèi)容。網(wǎng)頁(yè)的 SEO 方面將提升整個(gè)網(wǎng)站在搜索引擎中的排名。根據(jù)他們的說法，其中一項(xiàng)指標(biāo)是頁(yè)面加載時(shí)間。較小的頁(yè)面加載時(shí)間或站點(diǎn)加載時(shí)間表明用戶更傾向于在網(wǎng)站上而不是在加載速度較慢的站點(diǎn)上花費(fèi)時(shí)間。

通常，當(dāng)用戶打開網(wǎng)站時(shí)，瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器通過發(fā)送沒有任何內(nèi)容或加載屏幕的單個(gè) HTML 文件來響應(yīng)，直到瀏覽器獲取所有元素。這基本上意味著向用戶呈現(xiàn)一個(gè)空白頁(yè)面，直到內(nèi)容被提取和編譯，然后才被呈現(xiàn)以供顯示。

客戶端框架或 CSR 的工作方式是，緩慢的初始加載有助于后續(xù)頁(yè)面快速加載。但是，與服務(wù)器的通信僅用于獲取運(yùn)行時(shí)數(shù)據(jù)。這可能對(duì)獲得網(wǎng)站流量非常不利。對(duì)于大多數(shù)用戶網(wǎng)絡(luò)連接來說，這個(gè)過程很慢，迫使他們停止與您的網(wǎng)頁(yè)互動(dòng)并轉(zhuǎn)向另一個(gè)網(wǎng)頁(yè)。

它最終會(huì)使您的網(wǎng)頁(yè)在搜索頁(yè)面結(jié)果中的位置較低。由于網(wǎng)站性能不佳，該應(yīng)用程序幾乎沒有機(jī)會(huì)在社交媒體上被推薦。

CSR 的問題和丟失的功能

1. 搜索引擎不支持渲染 JavaScript

Angular 單頁(yè)應(yīng)用程序幾乎會(huì)將空的 html 頁(yè)面作為源代碼，如下所示。唯一的特殊元素是 app-root 元素，它是 Angular 應(yīng)用程序的根元素。實(shí)際內(nèi)容通過 java 腳本進(jìn)入這個(gè)根元素。

像 Google 及其 Googlebot 這樣的搜索引擎不支持呈現(xiàn) JavaScript，并且以 JavaScript 顯示的內(nèi)容不會(huì)被網(wǎng)絡(luò)爬蟲注意到，因此該網(wǎng)站不會(huì)在搜索結(jié)果中可見。

2. 第一個(gè)有意義的頁(yè)面

從第一頁(yè)開始到有意義的可見頁(yè)面，任何具有 CSR 的單頁(yè)應(yīng)用程序都可能需要一些時(shí)間（至少 2 秒或 3 秒）來加載第一個(gè)有意義的頁(yè)面。但是如果頁(yè)面在 2 或 3 秒內(nèi)沒有加載，大多數(shù)用戶會(huì)離開頁(yè)面。

3.現(xiàn)場(chǎng)預(yù)覽

站點(diǎn)和頁(yè)面預(yù)覽會(huì)吸引用戶打開您的博客或帖子。無論我們是在社交媒體上發(fā)布博客還是通過網(wǎng)絡(luò)通信平臺(tái)分享它們，它們都會(huì)獲取內(nèi)容以生成預(yù)覽，以便用戶可以在新聞源中看到它。但是當(dāng)我們的頁(yè)面中沒有內(nèi)容時(shí)，就無法生成提要。這是因?yàn)樵谶@樣的應(yīng)用程序中，源代碼的根元素是空的，沒有內(nèi)容。

用SSR代替CSR，讓網(wǎng)站對(duì)SEO有效

顯然，企業(yè)社會(huì)責(zé)任在許多情況下并不理想，我們可能需要找到另一種解決方案來規(guī)避這些問題。然而，它們可以通過服務(wù)器端渲染 (SSR) 來克服。

作為解決上述問題的第一步，我們應(yīng)該首先不要將根元素留空。這樣我們就可以在服務(wù)器上動(dòng)態(tài)渲染根元素內(nèi)容。因此，搜索引擎和站點(diǎn)預(yù)覽可以看到有意義的內(nèi)容。在此之后，角度開始并接管頁(yè)面。然后應(yīng)用程序?qū)?dòng)并運(yùn)行并照常工作。

所有這些都可以通過服務(wù)器端渲染（SSR）來實(shí)現(xiàn)。使用 SSR，當(dāng)用戶打開應(yīng)用程序時(shí)，瀏覽器會(huì)向服務(wù)器發(fā)出請(qǐng)求，響應(yīng)將準(zhǔn)備好提供 HTML。

服務(wù)器端呈現(xiàn) (SSR) 為應(yīng)用程序提供了通過在服務(wù)器而不是瀏覽器上顯示網(wǎng)頁(yè)來在瀏覽器中呈現(xiàn)網(wǎng)頁(yè)的能力。服務(wù)器端向客戶端發(fā)送一個(gè)完全呈現(xiàn)的頁(yè)面。客戶端的 JavaScript 包接管并允許 SPA 框架運(yùn)行。

SSR 可以通過 Angular Universal 實(shí)現(xiàn) Angular 應(yīng)用，React 的 Next.js 實(shí)現(xiàn) React 應(yīng)用。

使用 Angular Universal 啟用服務(wù)器端渲染

Angular Universal 技術(shù)在服務(wù)器上呈現(xiàn) Angular 應(yīng)用程序。我們可以通過 @angular/platform-server 包獲得它。

一個(gè)普通的 Angular 應(yīng)用程序在瀏覽器中執(zhí)行，在 DOM 中呈現(xiàn)頁(yè)面以響應(yīng)用戶操作。Angular Universal 在服務(wù)器上執(zhí)行，生成靜態(tài)應(yīng)用程序頁(yè)面，然后在客戶端引導(dǎo)。這意味著應(yīng)用程序通常會(huì)更快地呈現(xiàn)，讓用戶有機(jī)會(huì)在應(yīng)用程序完全交互之前查看應(yīng)用程序布局。（參考：https://angular.io/guide/universal）

在旁注中，可能會(huì)注意到服務(wù)器端渲染不會(huì)提高應(yīng)用程序的性能，但可以讓搜索引擎和第三方社交媒體服務(wù)訪問它。

服務(wù)器端渲染骨架

AppModule導(dǎo)入BrowserModule用于在瀏覽器中運(yùn)行應(yīng)用程序。AppModule在啟動(dòng)應(yīng)用程序的 main.ts 文件中配置。這也稱為 webpack 構(gòu)建的入口點(diǎn)。它是標(biāo)準(zhǔn)的角度應(yīng)用程序配置。

對(duì)于服務(wù)器端渲染，我們?cè)诹硪粋€(gè)名為AppServerModule的模塊中表示整個(gè)應(yīng)用程序。該模塊從angular.main.server.ts導(dǎo)入本機(jī)ServerModule，它將被創(chuàng)建為第二個(gè) webpack 構(gòu)建（即服務(wù)器構(gòu)建）的入口點(diǎn)。

簡(jiǎn)而言之，我們將有兩個(gè)構(gòu)建，一個(gè)用于瀏覽器，另一個(gè)用于服務(wù)器。

設(shè)置 Angular 通用

我們首先使用以下命令將 Angular Universal 添加到您的應(yīng)用程序中：ng add @nguniversal/express-engine/clientProject ssr-playround

上述命令添加/修改以下文件：

• AppServerModule.ts
• 主服務(wù)器.ts
• 應(yīng)用模塊.ts
• angular.json（構(gòu)建選項(xiàng)）
• 包.json
• tsconfig.server.json

構(gòu)建應(yīng)用程序

下一步，我們?yōu)閼?yīng)用程序構(gòu)建客戶端和服務(wù)器。客戶端和服務(wù)器的構(gòu)建過程不同，因?yàn)檫@兩個(gè)平臺(tái)都不同。

構(gòu)建完成后，我們可以在“dist”文件夾下看到客戶端和服務(wù)器的兩個(gè)子文件夾。

接下來我們需要一個(gè) Node.js 服務(wù)器來執(zhí)行以下功能：

• 預(yù)渲染應(yīng)用程序并在請(qǐng)求進(jìn)入時(shí)交付生成的 HTML
• 通過 Web 服務(wù)器提供應(yīng)用程序包

設(shè)置服務(wù)器代碼的步驟

• 設(shè)置 Express 服務(wù)器
• 從瀏覽器文件夾靜態(tài)提供文件。

現(xiàn)在我們來到設(shè)置中最有趣的部分，即設(shè)置 Express 引擎以呈現(xiàn) HTML。

• 注冊(cè) ngExpressEngine，這是一個(gè)腳本引擎，它告訴 Express 如何呈現(xiàn)特定的 HTML。（注冊(cè)名為“html”的“視圖”引擎）。
  
• 告訴 Express 在請(qǐng)求進(jìn)來以及需要呈現(xiàn)某些內(nèi)容時(shí)使用引擎。這將是路線。（并非每條路由都可以通過靜態(tài)服務(wù)來處理）。
  

Express 采用 index.html 文件，該文件是空的，并將 angular 帶入該頁(yè)面以引導(dǎo)應(yīng)用程序，就像它在瀏覽器中一樣。一旦 index.html 準(zhǔn)備好，它就會(huì)自動(dòng)返回給客戶端。

使用 NgUniversal Express 原理圖時(shí)，會(huì)自動(dòng)處理上述基本行為。（typescript 到 JavaScript 的編譯和打包將由已經(jīng)配置好的 webpack 完成）。

編譯和捆綁服務(wù)器進(jìn)程的命令：npm run compile:server

使用以下命令啟動(dòng)服務(wù)器：node dist/server

現(xiàn)在我們的應(yīng)用程序已經(jīng)啟動(dòng)并運(yùn)行服務(wù)器端渲染，并且可以通過 localhost:4000 打開以通過視圖源查看生成的 HTML。

使用 SSR 生成的 HTML 代碼：

完成這些步驟后，終于可以在搜索引擎上找到我們的網(wǎng)頁(yè)詳情了。總之，對(duì)于任何面向公眾的動(dòng)態(tài)內(nèi)容渲染應(yīng)用程序，我們可以選擇服務(wù)器端渲染作為解決方案以獲得更好的內(nèi)容覆蓋。但是，在為您的應(yīng)用程序選擇解決方案時(shí)，將優(yōu)缺點(diǎn)進(jìn)行對(duì)比總是一個(gè)好主意。

優(yōu)點(diǎn)：

• 初始內(nèi)容加載 SSR 用于 SEO 和社交媒體共享
• 提高感知性能
• 它適用于靜態(tài)網(wǎng)站
• 通過 CLI 的簡(jiǎn)單工具

缺點(diǎn)：

• SSR 始終需??要 Node.js 或其包裝器
• 頻繁的服務(wù)器請(qǐng)求
• 開始頁(yè)面內(nèi)交互的整體緩慢頁(yè)面呈現(xiàn)
• 整頁(yè)重新加載

使用 SSR 與 CSR 相比，使用 SSR 的優(yōu)缺點(diǎn)可以通過將其比喻為超市和餐館來描述。使用客戶端渲染，您可以去超市一次，然后花時(shí)間四處走動(dòng)并挑選食品以備存本月。在最初的消費(fèi)之后，在家中的每頓飯都可以按需提供食物。

但是對(duì)于服務(wù)器端渲染，渲染一個(gè)頁(yè)面元素就像你每次想吃飯時(shí)開車去餐廳一樣。每頓飯你都會(huì)來回走動(dòng)，但它會(huì)立即讓人飽足，并且不需要大量的初始準(zhǔn)備時(shí)間來購(gòu)買食材。實(shí)際上，SSR 只是提高了您的網(wǎng)站/應(yīng)用程序在搜索結(jié)果中的性能。這最終會(huì)在更大的業(yè)務(wù)場(chǎng)景中得到回報(bào)。